<template>
  <div class="user-list">
<el-card class="search-card">
    <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="用户名">
            <el-input v-model="searchForm.username" placeholder="请输入用户名" clearable />
        </el-form-item>
        <el-form-item label="手机号">
            <el-input v-model="searchForm.phone" placeholder="请输入手机号" clearable />
        </el-form-item>
        <el-form-item label="id">
            <el-input v-model="searchForm.id" placeholder="请输入id" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>
                搜索
            </el-button>
        </el-form-item>
        <el-form-item>
            <el-button  @click="resetSearch">
                <el-icon><Refresh /></el-icon>
                重置
            </el-button>
        </el-form-item>
    </el-form>
</el-card>
<el-card class="table-card">
    <template #header>
        <div class="card-header">
            <el-button type="primary" @click="handleAdd">
                <el-icon><Plus /></el-icon>
                新增用户
            </el-button>
            <el-button type="danger">
                批量删除
            </el-button>
        </div>
    </template>
    <el-table
    v-loading="loading"
    :data="tableData"
    border
    style="width:100%">
    <el-table-column type="index" label="序号" width="60" align="center" />
    <el-table-column label="头像" width="100" align="center" >
    <template #default="{ row }">
        <el-avatar
        :size="50"
        :src="'http://localhost:9191'+row.avatarUrl"
        @error="()=>true">
        <img src="/default-avatar.png" />
        </el-avatar>
    </template>
    </el-table-column>
        <el-table-column prop="username" label="账号" />
        <el-table-column prop="role" label="身份" />
        <el-table-column prop="nickname" label="昵称"  />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column label="地址" />
        <el-table-column label="操作" width="200" fixed="right" >
            <template #default="{ row }">
                <el-button-group>
                    <el-button type="primary" link @click="handleEdit(row)">
                        <el-icon><Edit  /></el-icon>
                        编辑
                    </el-button>
                    <el-button type="primary" link @click="handleStatus(row)">
                        <el-icon><CircleCheck /></el-icon>
                        {{row.status === 1 ? '禁用' : '启用'}}
                    </el-button>
                    <el-button type="danger" link @click="handleDelete(row)">
                        <el-icon><Delete /></el-icon>
                        删除
                    </el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination 
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,15,20]"
        :total="total"
        layout="total,sizes,prev,pager,next,jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>
</el-card>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import request from '@/utils/request'
const router=useRouter()
const loading=ref(false)
const tableData=ref([])
const total=ref(0)
const currentPage=ref(1)
const pageSize=ref(10)

const searchForm = reactive({
    username:'',
    phone:''
})

//获取用户列表
const getUserList = async () =>{
    loading.value=true
    try{
        const res = await request({
            url:'/user/page',
            method:'get',
            params:{
                pageNum:currentPage.value,
                pageSize:pageSize.value,
                ...searchForm
            }
        })
        tableData.value=res.data.records
        total.value=res.data.tatal
    }catch(error){
        console.log('获取用户列表失败：',error);
    }finally{
        loading.value=false
    }
}

//搜索
const handleSearch=()=>{
    currentPage.value=1
    getUserList()
}

//重置搜索
const resetSearch=()=>{
    Object.keys(searchForm).forEach(key =>{
        searchForm[key]=''
    })
    handleSearch()
}

//新增用户
const handleAdd=()=>{
    router.push('/admin/index/add')
}

//编辑用户 
const handleEdit = (row) =>{
    router.push(`/admin/index/xg/${row.username}`)
}

//修改用户状态
const handleStatus = async (row) =>{
    try{
        await request({
            url:`/user/status/${row.id}`,
            method:'put',
            data:{
                status:row.status === 1 ? 0 : 1
            }
        })
        ElMessage.success('操作成功')
        getUserList()
    }catch(error){
        console.error('修改用户状态失败：',error);
    }
}

//删除用户
const handleDelete=(row)=>{
    ElMessageBox.confirm(
        '确定要删除该用户吗？',
        '警告',
        {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
        }
    ).then(async () =>{
        try{
            await request({
                url:`/user/${row.id}`,
                method:'delete'
            })
            ElMessage.success('删除成功')
            getUserList()
        }catch (error){
           console.error('删除用户失败：',error) 
        }
    }).catch(()=>{})
}

//分页
const handleSizeChange = (val) =>{
    pageSize.value=val
    getUserList()
}
const handleCurrentChange = (val)=>{
    currentPage.value = val
    getUserList()
}
onMounted(()=>{
    getUserList()
})
</script>

<style scoped>
.user-list{
  width: 100%;
  height: 99vh;
  overflow: hidden;
}
.search-card{
    margin-bottom: 20px;
}
.search-form{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.card-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pagination{
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>